.action-element, .action-from-element, .action-to-element, .element {
  color: $brandcolor;
}

.action-test-data, .test_data {
  color: #073C7F;
  //line-height: 1.5;
}

.action-attribute, .attribute {
  color: orange;
}
.action-selected-data, .selected_list {
  color: #7407FF;
  //line-height: 1.5;
}
.action-attribute, .action-test-data, .action-from-element, .action-to-element, .action-element, .attribute, .element, .test_data, .action-selected-data, .selected_list{
  font-family: inherit;
  padding: 0 3px;
  min-width: 20px;
}

.step-result .action-element, .step-result .action-from-element, .step-result .action-to-element, .step-result .action-test-data, .step-result .action-attribute {
  color: inherit;
}

.autocomplete-suggestions {
  border: 1px solid #999;
  background: $white;
  overflow: auto;
}

.autocomplete-suggestion {
  padding: 2px 5px;
  white-space: nowrap;
  overflow: hidden;
}

.autocomplete-selected {
  background: #f0f0f0;
}

.autocomplete-suggestions strong {
  font-weight: normal;
  color: #39f;
}

.autocomplete-group {
  padding: 2px 5px;
}

.autocomplete-group strong {
  display: block;
  border-bottom: 1px solid $black;
}

.autosuggest {
  /* background-color: $default-bgc; */
  height: auto;
  list-style: none outside none;
  margin-left: 0;
  margin-top: 0;
  padding-left: 0;
  margin-bottom: 0;
}

.autosuggest li {
  padding: 10px 15px;
}

.autohover {
  background-color: #dae4e9;
}


#action:empty:before, .data-placeholder-animate:empty:before {
  content: attr(data-placeholder);
  margin-top: -1px;
}

#action:empty:before, #action::-webkit-input-placeholder, input#goToUrl::-webkit-input-placeholder, .data-placeholder-animate:empty:before {
  color: gray;
  opacity: 0;
  transition: all 1.1s ease-out;
}

#action.placeholder-animate:empty:before, #action::-webkit-input-placeholder, input#goToUrl.placeholder-animate::-webkit-input-placeholder, .placeholder-animate.data-placeholder-animate:empty:before {
  opacity: 1;
  transition: all 1.5s ease-out;
}

#action {
  margin: 0 0 2px;
  font-size: inherit;
  word-wrap: break-word;
  background-color: inherit;
  border: 0;
  border-radius: initial;
  overflow: inherit;
  line-height: 1.2;
  display: flex;
  flex-wrap: wrap;
  cursor: text;
}

.rest-method-container {
  @extend .theme-border, .border-rds-4, .d-flex, .mr-15;
  flex: 1;

  .method-select {
    width: 100px;
  }
}

.rest-response-view {
  @extend .ts-col-50, .theme-gray-light, .mh-100;
  padding: 0 35px 55px;

  .sub-title {
    @extend .py-20
  }

  .response-container {
    @extend .theme-border, .border-rds-4, .overflow-x-hidden;
    height: calc(100% - 55px);

    .CodeMirror.cm-s-default.CodeMirror-wrap {
      @extend .h-100;
    }
  }

  .response-iframe {
    @extend .w-100, .mh-40;
  }
}

.destroy-item {
  box-shadow: 0 0 9px 3px #e2e2e2;
  border-radius: 4px;
  border: none;
  margin-bottom: 7px;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: destroy;
  animation-name: destroy;
}

.destroy-item-bottom {
  //box-shadow: 0 0 9px 3px #e2e2e2;
  border-radius: 4px;
  border: none;
  margin-bottom: 7px;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: destroy-bottom-top-fade-out;
  animation-name: destroy-bottom-top-fade-out;
}

.add-item-bottom {
  border: none;
  margin-bottom: 7px;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: add-fade-in;
  animation-name: add-fade-in;
}

.action-list-item-container {

  .add-before-container {
    @extend .d-flex, .justify-content-center, .position-absolute;
    top: -10px;
    width: calc(100% - 50px);
  }

  .add-after-container {
    @extend .d-flex, .justify-content-center, .position-absolute;
    bottom: -10px;
    width: calc(100% - 50px);
  }

  .action-add-before-placeholder, .action-add-after-placeholder {
    @extend .theme-border, .border-rds-4, .text-t-secondary, .justify-content-center, .align-items-center, .d-none, .pointer, .overflow-x-hidden;
    padding: 2px 12px;
    margin:auto 15px !important;
    background: white !important;
    text-align: center;
    z-index: 2;
    opacity: 0;
  }


  &:hover {
    .action-add-before-placeholder, .action-add-after-placeholder {
      @extend .d-flex;
      animation-delay: 500ms;
      -webkit-animation-duration: 100ms;
      animation-duration: 100ms;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-name: add-after-before;
      animation-name: add-after-before;
    }
  }
}

.bulk-action-container {
  position: absolute;
  background: $white;
  padding: 9px;
  box-shadow: 0 0 4px 0 #b5b3b3;
  border-radius: 0 0 0 6px;
  right: 0;
  transition: all 500ms ease;
  top: -60px;
  opacity: 0;

  &.showed {
    top: 0;
    opacity: 1;
    z-index: 3;
  }
  .btn{
    height: 33px;
  }
}

.action-edit-container, .action-enable-edit-index {
  display: none;
}

.action-enable-edit-index + .action-edit-container, .action-after-index + .action-after-container {
  display: block;
}

.action-drop-down-container {
  @extend .mx-n30, .overflow-y-auto, .p-25, .pt-15;
  background: $white;
  box-shadow: 0 0 3px rgba(106, 115, 125, 0.15), 0 20px 24px rgba(106, 115, 125, 0.2);
  border-radius: 0 0 6px 6px;
  min-height: 80px;
  max-height: 300px;
  margin-top: 13px;

  .action-drop-down-item {
    @extend .d-flex;
    @extend .align-items-center;
    @extend .pointer;
    @extend .py-8;
    @extend .grey-on-hover;
    scroll-snap-align: start;
    scroll-snap-stop: always
  }
}

.data-placeholder-content {
  &:empty:before {
    content: attr(data-placeholder);
    color: #808080;
  }
}

.placeholder-test-animate:empty:before {
  color: gray;
  transition: all 2s ease-out;
  -webkit-animation: navigationActionAnimation 6s infinite linear;
  -o-animation: navigationActionAnimation 6s infinite linear;
  animation: navigationActionAnimation 6s infinite linear;
  content: 'http://travel.testsigma.com/';
  opacity: 0;
  display: block;
}

.step-help-ribbon{
  @extend .align-items-center, .d-flex, .theme-gray-light, .theme-border-t, .text-t-secondary;
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  transition: all 500ms ease;
  padding: 6px 50px;
  &.show {
    bottom: 4px;
    z-index: 101;
  }
}

.action-help-widget {
  @extend .d-block, .h-100;
  position: absolute;
  left: 100%;
  right: 0;
  //transition: all 100ms ease;
  &.show {
    left: 0;
  }
}

.action-help-short-trigger{
  @extend .pointer, .d-block, .p-10, .fz-15;
  position: absolute;
  right: 37px;
}

.action-re-run-active-group {
  @extend .theme-border, .border-rds-6, .mb-10, .px-14;
  .child-list-item {
    @extend  .theme-border-b, .py-10, .pl-14;
    border-radius: 0!important;
  }
}

.action-error-content {
  @extend .ts-col-100-36;
  margin-left: -33px;
  margin-right: -30px !important;
  &.p-sm {
    padding: 11px 30px;
  }
  &.mt-13 {
    margin-top: 13px;
  }
}

.action-btn-container {
  @extend .d-flex,.align-items-center,.theme-gray-light;
  padding: 11px 35px;border-top: 1px solid #A3A4A5;
}
.action-cf-btn-container {
  @extend .d-flex,.align-items-center,.theme-gray-light,.mt-2;
  padding: 11px 35px;margin-left:-33px; flex: 0 0 108.5%;max-width: 108.5%;margin-right: -100px;
}

.action-step-details {
  padding: 35px 34px 39px 38px;
  .step-detail-bg {
    background: rgba(255, 255, 255, 0.5);
  }
  .step-container {
    max-width: calc(50% - 15px);
  }
  .step-detail-p {
    padding: 11px 15px;
  }
}

.recorder-beta-btn {
  @extend .px-4, .py-2, .text-uppercase;
  position: absolute;
  right: 5px;
  top: -8px;
  background: #FCD900;
  border-radius: 2px;
  font-size: 8px;
}

.show-if {
  width: calc(100% - 90px)!important;
}
.show-else-if {
  width: calc(100% - 120px)!important;
}
.show-while {
  width: calc(100% - 140px)!important;
}

.content-else-if {
  width: 60px;
  max-width: 60px;
}
.content-if {
  width: 30px;
  max-width: 30px;
}
.content-while {
   width: 80px;
   max-width: 80px;
 }
.step-container-section {
  display: flex;
  margin-left: auto;
  margin-right: 20px;
  flex: 0 0 100%;
  max-width: 100%;
  position: relative;
}
.has-else-if {
  .step-container-section {
    flex: 0 0 calc(100% - 80px);
    max-width: calc(100% - 80px);
  }
}

.has-if {
  .step-container-section {
    flex: 0 0 calc(100% - 45px);
    max-width: calc(100% - 45px);
  }
}
.has-while-loop {
  .step-container-section {
    flex: 0 0 calc(100% - 30px);
    max-width: calc(100% - 30px);
  }
}
.action-help{
  .card-container{
    height: calc(100% - 130px) !important;
  }
}

.action-flex-auto {
  flex: auto;
}
.action-steps-list{
  .action-record-button{
    display: block!important;
  }
  .action-record-default-button{
    display: none;
  }
}
.step-details-container{
  .segment-value {
    white-space: normal!important;
    line-height: 1.5;
  }
  .expandable{
    .segment-value{
      padding-left: 15px;
    }
    .toggler {
      margin-left: 6% !important;
    }
  }
}
.opacity-7{
  opacity: 0.7;
}
.carousel{
  @extend .h-100;
}
